<script setup>

import md5 from 'js-md5'
import {ref, onMounted, watch, computed} from 'vue';
import axios from "axios";
import {snackbar} from './store'

// 查询
const itemsPerPage = ref(10);
const pageNo = ref(1);
const headers = [
    {title: '序号', key: 'num', sortable: false},
    {title: '裁判姓名', key: 'name', sortable: false},
    {title: '用户名', key: 'userName', sortable: false},
    {title: '手机号', key: 'phone', sortable: false},
    {title: '性别', key: 'sex', sortable: false},
    {title: '身份证', key: 'idCard', sortable: false},
    {title: '所属企业', key: 'companyName', sortable: false},
    {title: '职称', key: 'title', sortable: false},
    {title: '状态', key: 'status', sortable: false},
    {title: '创建时间', key: 'createTime', sortable: false},
    {title: '操作', key: 'actions', sortable: false}
];
const items = ref([]);
const loading = ref(true);
const totalItems = ref(0);

const search = ref('');
const name = ref(null);
const code = ref(null);
const updatePasswordType = ref(false);
watch(name, () => {
    search.value = name.value
})
watch(code, () => {
    search.value = code.value
})

function loadItems({page, itemsPerPage}) {
    pageNo.value = page
    loading.value = true;
    axios.post('/basJudge/selectPage', {
        pageNo: pageNo.value,
        pageSize: itemsPerPage,
        name: name.value,
        phone: code.value,
        delFlag: 1
    }).then(res => {
        items.value = res.data.records;
        totalItems.value = res.data.total;
        loading.value = false;
    })
}

onMounted(() => {});

// 增改
const isShowDialog = ref(false)
const dialogEnum = {
    update: '编辑',
    create: '新增'
}
const dialogType = ref(null)
const isShowDeleteDialog = ref(false)
const editedItem = ref({
    name: "",
    phone: "",
    userName: "",
    password: "",
    status: 1,
    sex: "1",
    idCard: "",
    companyName: "",
    title: ""
});

function resetEditedItem() {
    editedItem.value = {
        name: "",
        phone: "",
        userName: "",
        password: "",
        status: 1,
        sex: "1",
        idCard: "",
        companyName: "",
        title: ""
    }
}

function clickNew() {
    dialogType.value = dialogEnum.create
    updatePasswordType.value = true
    isShowDialog.value = true
}

function close() {
    isShowDialog.value = false
    resetEditedItem()
    dialogType.value = null
}

function clickEdit(item) {
    editedItem.value = Object.assign({}, item)
    delete editedItem.value.password
    updatePasswordType.value = false
    editedItem.value.status += ""
    editedItem.value.sex += ""
    isShowDialog.value = true
    dialogType.value = dialogEnum.update
}

function save() {
    if (dialogType.value === dialogEnum.update) {
        let obj = JSON.parse(JSON.stringify(editedItem.value))
        if(updatePasswordType.value) {
            obj.password = md5(obj.password)
        }
        axios({
            method: 'POST',
            url: '/basJudge/updateBasJudge',
            data: obj
        }).then(() => {
            snackbar.info('编辑成功')
            close()
            loadItems({page: pageNo.value, itemsPerPage: itemsPerPage.value})
        })
    } else if (dialogType.value === dialogEnum.create) {
        let obj = JSON.parse(JSON.stringify(editedItem.value))
        obj.password = md5(obj.password)
        axios({
            method: 'POST',
            url: '/basJudge/saveBasJudge',
            data: obj
        }).then((res) => {
            console.log(res.data)
            snackbar.info('创建成功')
            close()
            loadItems({page: pageNo.value, itemsPerPage: itemsPerPage.value})
        })
    }
}

// 删
const beDeleteItem = ref({})

function clickDelete(item, type) {
    isShowDeleteDialog.value = true
    beDeleteItem.value = item
    beDeleteItem.value.startType = type
}

function clickDeleteConfirm() {
    axios.post('/basJudge/delBasJudge', {id: beDeleteItem.value.id, status: beDeleteItem.value.startType}).then(() => {
        snackbar.info("操作成功")
        loadItems({page: pageNo.value, itemsPerPage: itemsPerPage.value})
        clickCloseDelete()
    })
}

function clickCloseDelete() {
    isShowDeleteDialog.value = false
    beDeleteItem.value = {}
}

</script>

<template>
    <v-toolbar density="compact">
        <v-toolbar-title>系统裁判管理</v-toolbar-title>
        <v-text-field v-model="name" :clearable="true" hide-details label="查询名称"></v-text-field>
        <v-text-field v-model="code" :clearable="true" hide-details label="查询手机号"></v-text-field>
        <v-dialog v-model="isShowDialog" max-width="500px">
            <template v-slot:activator="{ props }">
                <v-btn icon="mdi-plus" v-on:click="clickNew" v-bind="props"></v-btn>
            </template>
            <v-card>
                <v-card-title>{{ dialogType }}</v-card-title>
                <v-card-text>
                    <v-text-field v-model="editedItem.name" label="裁判昵称" required></v-text-field>
                    <v-text-field v-model="editedItem.userName" label="用户名" required></v-text-field>
                    <v-text-field v-if="updatePasswordType" v-model="editedItem.password" label="密码" required></v-text-field>
                    <v-text-field v-model="editedItem.phone" label="手机号" required></v-text-field>
                    <v-select
                    v-model="editedItem.sex"
                    :items="[{value:'1',title:'男'},{value:'0',title:'女'}]"
                    label="性别" 
                    required></v-select>
                    <v-text-field v-model="editedItem.idCard" label="身份证" required></v-text-field>
                    <v-text-field v-model="editedItem.companyName" label="所属企业" required></v-text-field>
                    <v-text-field v-model="editedItem.title" label="职称" required></v-text-field>
                </v-card-text>
                <v-card-actions>
                    <v-btn color="primary" variant="text" @click="close">关闭</v-btn>
                    <v-btn color="primary" variant="text" @click="save">确定</v-btn>
                    <v-btn color="primary" variant="text" v-if="dialogType == dialogEnum.update" @click="updatePasswordType = !updatePasswordType">修改密码</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        <v-dialog v-model="isShowDeleteDialog" max-width="500px">
            <v-card>
                <v-card-title class="text-h5">确定{{ beDeleteItem.startType ? '启用' : '禁用' }}?</v-card-title>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="blue-darken-1" variant="text" @click="clickCloseDelete">取消</v-btn>
                    <v-btn color="blue-darken-1" variant="text" @click="clickDeleteConfirm">确定</v-btn>
                    <v-spacer></v-spacer>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-toolbar>
  <!--  分页文本待更换   items-per-page-text="每页数量"-->
    <v-data-table-server :search="search" :items-per-page="itemsPerPage" :headers="headers" :items-length="totalItems"
    :items="items"
    :loading="loading"
    class="elevation-1"
    items-per-page-text="每页数量"
    @update:options="loadItems">
        <template v-slot:item.num="{ index }">
            <span>{{ index + 1 }}</span>
        </template>
        <template v-slot:item.status="{ item }">
            <v-chip v-if="item.status == 1" color="green">
                正常
            </v-chip>
            <v-chip v-if="item.status == 0" color="red">
                停用
            </v-chip>
        </template>
        <template v-slot:item.sex="{ item }">
            <span v-if="item.sex == 1">男</span>
            <span v-if="item.sex == 0">女</span>
        </template>
        <template v-slot:item.actions="{ item }">
            <v-btn icon="mdi-pencil" variant="text" @click="clickEdit(item)"></v-btn>
            <v-btn icon="mdi-delete" variant="text" @click="clickDelete(item, 0)" v-if="item.status == 1"></v-btn>
            <v-btn icon="mdi-restart" variant="text" @click="clickDelete(item, 1)" v-if="item.status == 0"></v-btn>
        </template>
    </v-data-table-server>
</template>

<style scoped lang="less">

</style>
